<html>
<head>
    <meta charset="utf-8" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>连接数据库</title>
    <link rel="stylesheet" href="/lay/layui/css/layui.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/lay/layui/layui.js"></script>
    <script src="/js/cookie.js"></script>
    <style>
        .input-content{
            margin: auto;
            width: 40%;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body background="/image/timg2.jpg">
    <div class="input-content">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">服务器地址</label>
                <div class="layui-input-block">
                    <input type="text" name="host" value="" required  lay-verify="required" placeholder="服务器地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" value="" required  lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" value="" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">端口号</label>
                <div class="layui-input-inline">
                    <input type="text" name="port" value="3306" disabled="disabled" required lay-verify="required" placeholder="端口号" autocomplete="off" class="layui-input">
                    暂时只支持3306端口
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="checkbox" name="protocol" title="同意使用协议" checked>
                    <a href="javascript:;">查看使用协议</a>&nbsp;&nbsp;<a href="javascript:;" onclick="openUseDesc()">查看使用说明</a>
                    </br></br>您的登录信息只会以session形式存储，退出后将清空登录信息。
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">连接</button>
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="testConnect">测试连接</button>
                </div>
            </div>

        </form>
    </div>
<div id="use_desc_content" style="display: none;">
    <p>1、端口号暂时只支持3306。</p>
    <p>2、表结构请使用ID作为唯一主键，否则数据行的编辑和删除功能将不可用。</p>
</div>
</body>

<script>
    layui.use('form', function(){
        var form = layui.form;
        var layer = layui.layer;

        //监听提交
        form.on('submit(formDemo)', function(data){
            if (data.field.protocol != 'on') {
                layer.msg('请同意使用协议', {
                    icon: 7,
                    time: 10000,
                    anim: 6,
                    closeBtn: 1,
                });
                return false;
            }
            data.field._token = $('meta[name="csrf-token"]').attr('content');
            var index = layer.load(1);
            $.ajax({
                url: '/config/connectMysql',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    layer.close(index);
                    if (res.status == 200) {
                        // 设置cookie
                        setCookie('token', res.data.token);
                        layer.msg('连接成功，加载中...', { icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: '50%', time: 300000 });
                        setTimeout(function(){
                            location.href = '/index/index';
                        }, 3000);
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 10000,
                            anim: 6,
                            closeBtn: 1,
                        });
                    }
                }
            })
            return false;
        });


        form.on('submit(testConnect)', function(data){
            // console.log(data.field.protocol=='on');return false;
            if (data.field.protocol != 'on') {
                layer.msg('请同意使用协议', {
                    icon: 7,
                    time: 10000,
                    anim: 6,
                    closeBtn: 1,
                });
                return false;
            }
            data.field._token = $('meta[name="csrf-token"]').attr('content');
            var index = layer.load(1);
            $.ajax({
                url: '/config/testConnect',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    layer.close(index);
                    if (res.status == 200) {
                        layer.alert('连接成功', {icon: 1});
                    } else {
                        layer.alert('连接失败', {icon: 2});
                    }
                }
            })
            return false;
        });
    });

    function openUseDesc() {
        layer.open({
            type: 1,
            title: '使用说明',
            area: ['700px', '400px'],
            content: $('#use_desc_content'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }
</script>

</html>